<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>会员注册</title>
    <style>
        body {
            font-family: "Microsoft Yahei", sans-serif;
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
        }
        h3 {
            text-align: left;
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        label {
            display: inline-block;
            width: 80px;
            text-align: right;
            margin-right: 10px;
        }
        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="tel"],
        input[type="date"],
        select,
        textarea {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            width: 200px;
        }
        .required {
            color: red;
            margin-left: 5px;
            font-size: 14px;
        }
        .verify-code {
            display: flex;
            align-items: center;
        }
        .verify-code input {
            margin-right: 10px;
        }
        .code-display {
            display: inline-block;
            width: 60px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            margin-right: 5px;
            letter-spacing: 2px;
        }
        .refresh-code {
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            border: 1px solid #ccc;
            border-radius: 3px;
            cursor: pointer;
            font-size: 16px;
        }
        .gender input {
            width: auto;
            margin-right: 5px;
        }
        .gender label {
            width: auto;
            text-align: left;
            margin-right: 0;
        }
        .salary {
            display: flex;
            align-items: center;
        }
        .salary input[type="range"] {
            width: 150px;
            margin-right: 10px;
        }
        .salary span {
            width: 60px;
        }
        .hobby input {
            width: auto;
            margin-right: 5px;
        }
        .hobby label {
            width: auto;
            text-align: left;
            margin-right: 0;
        }
        .photo-preview {
            width: 200px;
            height: 150px;
            border: 1px solid #ccc;
            margin: 10px 0 0 90px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .photo-preview img {
            max-width: 100%;
            max-height: 100%;
        }
        textarea {
            height: 100px;
            vertical-align: top;
        }
        .buttons {
            margin-left: 90px;
            margin-top: 10px;
        }
        button {
            padding: 6px 15px;
            margin-right: 10px;
            background-color: #e0e0e0;
            border: 1px solid #ccc;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h3>欢迎注册会员</h3>
    <form>
        <!-- 手机号码 -->
        <div class="form-group">
            <label for="phone">手机号码：</label>
            <input type="tel" id="phone" placeholder="11位手机号" required>
            <span class="required">必填</span>
        </div>

        <!-- 创建密码 -->
        <div class="form-group">
            <label for="password">创建密码：</label>
            <input type="password" id="password" placeholder="8位密码" required>
            <span class="required">必填</span>
        </div>

        <!-- 注册邮箱 -->
        <div class="form-group">
            <label for="email">注册邮箱：</label>
            <input type="email" id="email" placeholder="例如wustzz@sina.com" required>
            <span class="required">必填</span>
        </div>

        <!-- 验证码 -->
        <div class="form-group">
            <label for="verifyCode">验证码：</label>
            <div class="verify-code">
                <input type="text" id="verifyCode" placeholder="请输入验证码" required>
                <div class="code-display" id="codeDisplay">UJFg</div>
                <div class="refresh-code" id="refreshCode">↻</div>
            </div>
        </div>

        <!-- 性别 -->
        <div class="form-group gender">
            <label>性别：</label>
            <input type="radio" name="gender" value="male" checked> 男
            <input type="radio" name="gender" value="female"> 女
        </div>

        <!-- 生日 -->
        <div class="form-group">
            <label for="birthday">生日：</label>
            <input type="text" id="birthday" placeholder="年/月/日">
        </div>

        <!-- 年龄 -->
        <div class="form-group">
            <label for="age">年龄：</label>
            <input type="text" id="age">
        </div>

        <!-- 籍贯 -->
        <div class="form-group">
            <label>籍贯：</label>
            <select name="province">
                <option value="hubei">湖北省</option>
            </select>
            <select name="city">
                <option value="wuhan">武汉</option>
            </select>
        </div>

        <!-- 个人学历 -->
        <div class="form-group">
            <label>个人学历：</label>
            <select name="education">
                <option value="bachelor">本科</option>
            </select>
        </div>

        <!-- 月薪 -->
        <div class="form-group salary">
            <label>月薪：</label>
            <input type="range" id="salary" min="0" max="10000" value="5000">
            <span id="salaryValue">5000</span>
        </div>

        <!-- 个人爱好 -->
        <div class="form-group hobby">
            <label>个人爱好：</label>
            <input type="checkbox" name="hobby" value="sing"> 唱歌
            <input type="checkbox" name="hobby" value="run"> 跑步
            <input type="checkbox" name="hobby" value="swim"> 游泳
        </div>

        <!-- 个人照片 -->
        <div class="form-group">
            <label>个人照片：</label>
            <input type="file" id="photo">
        </div>
        <div class="photo-preview" id="photoPreview">
            <!-- 照片预览区域 -->
        </div>

        <!-- 个人简介 -->
        <div class="form-group">
            <label for="intro">个人简介：</label>
            <textarea id="intro" rows="5"></textarea>
        </div>

        <!-- 提交和重置按钮 -->
        <div class="buttons">
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </div>
    </form>

    <script>
        // 生成随机验证码（4位，数字+大小写字母混合）
        function generateCode() {
            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let code = '';
            for (let i = 0; i < 4; i++) {
                const randomIndex = Math.floor(Math.random() * chars.length);
                code += chars[randomIndex];
            }
            document.getElementById('codeDisplay').textContent = code;
        }

        // 页面加载时生成初始验证码
        generateCode();
        // 点击“刷新”按钮生成新验证码
        document.getElementById('refreshCode').addEventListener('click', generateCode);

        // 月薪滑块实时显示当前值
        const salarySlider = document.getElementById('salary');
        const salaryValue = document.getElementById('salaryValue');
        salarySlider.addEventListener('input', function() {
            salaryValue.textContent = this.value;
        });

        // 个人照片预览功能
        const photoInput = document.getElementById('photo');
        const photoPreview = document.getElementById('photoPreview');
        photoInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const img = document.createElement('img');
                    img.src = event.target.result;
                    photoPreview.innerHTML = '';
                    photoPreview.appendChild(img);
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>
</html>